<template name="classList">
	<view class="classList">
		<scroll-view class="oneClass" scroll-y="true" :style="{'height':height+'px','width':leftWidth+'px'}" @touchmove.stop>
			<block v-for="(one,i) in allClass" :key="i">
				<text class="oneItem" :class="[i==oneIndex?'active':'']" :data-oneid="one.id" :data-index="i" @tap="selectClass">{{one.name}}</text>
			</block>
		</scroll-view>
		<scroll-view class="twoClass" scroll-y="true" :style="{'height':height+'px','width':rightWidth+'px'}" @touchmove.stop>
			<view class="oneTitle" :data-cid="allClass[oneIndex].id" data-chanel="firCate" :data-cname="allClass[oneIndex].name" @tap="toList" >
				<text class="ttText">查看全部</text>
				<text class="iconfont icon-right"></text>
			</view>
			<block v-for="(two,n) in allClass[oneIndex].items" :key="n">
				<view class="twoCnt">
					<view class="twoBox" :data-cid="two.id" :data-cname="two.name" @tap="toList" data-chanel="secCate" >
						<text class="ttText">{{two.name}}</text>
						<text class="iconfont icon-right"></text>
					</view>
					<view class="threeBox">
						<text v-for="(three,x) in two.items" :key="x" :data-cid="three.id" data-chanel="thirCate" :data-tid="two.id" :data-cname="three.name" @tap="toList" >{{three.name}}</text>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'classList', //组件名称
		// 传递参数
		props: {
			height: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				allClass: state => state.goodClass.allClass,
			})
		},
		// 组件参数
		data() {
			return {
				oneIndex: 0,
				scWidht:uni.getSystemInfoSync().screenWidth,
				leftWidth:parseInt(uni.getSystemInfoSync().screenWidth*0.3),
				rightWidth:uni.getSystemInfoSync().screenWidth-parseInt(uni.getSystemInfoSync().screenWidth*0.3)
			}
		},
		// 组件方法
		methods: {
			// 选择一级分类
			selectClass(e) {
				this.oneIndex = parseInt(e.currentTarget.dataset.index)
			},
			toList(e){
				if(e.currentTarget.dataset.chanel=="firCate"){
					this.toPage({
						url:'goodList',
						type:0,
						firCate:e.currentTarget.dataset.cid,
						cname:e.currentTarget.dataset.cname
					})
				}else if(e.currentTarget.dataset.chanel=="secCate"){
					this.toPage({
						url:'goodList',
						type:0,
						firCate:this.allClass[this.oneIndex].id,
						secCate:e.currentTarget.dataset.cid,
						cname:e.currentTarget.dataset.cname
					})
				}else{
					this.toPage({
						url:'goodList',
						type:0,
						firCate:this.allClass[this.oneIndex].id,
						secCate:e.currentTarget.dataset.tid,
						thirCate:e.currentTarget.dataset.cid,
						cname:e.currentTarget.dataset.cname
					})
				}
			}
		},
		created() {
			this.$store.dispatch('apiGetAllClass')
		}
	}
</script>

<style lang="less" scoped>
	@import "@/common/public.less";

	.classList {
		display: flex;
		width: 100%;
		.oneClass {
			width: 40%;
			display: flex;
			flex-direction: column;
			background-color: #f2f2f2;

			.oneItem {
				font-size: 32upx;
				color: #202932;
				display: block;
				text-align: center;
				height: 90upx;
				line-height: 90upx;
			}

			.active {
				background-color: #FFFFFF;
			}

		}

		.twoClass {
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			
			.oneTitle {
				height: 90upx;
				line-height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30upx;
				padding-right: 50upx;

				.ttText {
					font-size: 32upx;
					color: #202932;
				}

				.iconfont {
					font-size: 32upx;
					color: #939393;
				}
			}

			.twoCnt {
				display: flex;
				flex-direction: column;
				padding-left: 30upx;
				padding-right: 50upx;

				.twoBox {
					height: 90upx;
					line-height: 90upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16upx;

					.ttText {
						font-size: 32upx;
						color: #202932;
					}

					.iconfont {
						font-size: 32upx;
						color: #939393;
					}
				}
			}

			.threeBox {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;
		

				>text {
					height: 44upx;
					background-color: #f6f6f6;
					font-size: 24upx;
					color: #202932;
					border-radius: 22upx;
					line-height: 44upx;
					padding: 0 20upx;
					margin-bottom: 30upx;
					// margin-left: 10upx;
					margin-right: 20upx;
				}

			}
		}
	}
</style>
